<template>
  <div id="app">
    <Header notab="company"/>
    <div class="contentWeb">
      <div class="searchtops">
        <el-row :gutter="0">
          <el-col :span="2"><b>所属行业</b></el-col>
          <el-col :span="22">
            <span @click="tosearch('industry', '不限')"
                  :class="search.industry == '不限' || (search.industry == '') ? 'on': ''">不限</span>
            <el-dropdown v-for="item in occupationlist" :key="item.id"
              :class="searchIndustry == item.name || (searchIndustry == '' && item.name === '不限') ? 'on': ''"
              @command="handleCommand">
              <span>{{item.name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="childItem in item.contentSet"
                  :style="search.industry === childItem.name ? 'background-color:#20a2b2; color:#fff;' : ''"
                  :command="{name:childItem.name, parentName: item.name}"
                  :key="childItem.id">
                  {{childItem.name}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="2"><b>企业性质</b></el-col>
          <el-col :span="22">
            <span @click="tosearch('nature', item.subTypeName)" v-for="(item, index) in objlist.nature"
                  :class="search.nature == item.subTypeName || (search.nature == '' && item.subTypeName === '不限')? 'on': ''"
                  :key="index">{{item.subTypeName}}</span>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="2"><b>企业规模</b></el-col>
          <el-col :span="22">
            <span @click="tosearch('size', item.subTypeName)" v-for="(item, index) in objlist.companySize"
                  :class="search.size == item.subTypeName || (search.size == '' && item.subTypeName === '不限')? 'on': ''" :key="index">{{item.subTypeName}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="listcount">共有<span>{{total}}个</span>符合条件的企业</div>
      <div class="companyList clear">
        <div class="list-item" v-for="(item, index) in ListList" :key="index"
        @click="todetail(item.enterpriseUid)">
          <img class="youxuan" v-if="item.isGood == 1" :src="reh">
          <img class="logo" :src="item.logo">
          <div class="btn-collect" @click.stop="myCollection(item)">{{item.isCollection == 1 ? '已关注': '关注'}}</div>
          <div class="item">
            <p class="name">{{item.name}}</p>
            <p class="desc">
              <span>{{item.industry}}</span><i></i>
              <span>{{item.enterpriseNature}}</span>
              <template v-if="item.companySize">
                <i></i><span>{{item.companySize}}</span>
              </template>
            </p>
            <p>
              热招<span class="zhiwei">{{item.locked || 0}}</span>
              {{ (item.locked && item.positionSet && item.positionSet.length) && item.positionSet[0].wageRange}}
              <template v-if="item.treatment">
              <span class="fuli">企业福利：
                <template v-for="(fuli, findex) in item.treatment.split(',')">
                <span v-if="findex < 3" :key="findex">
                  {{fuli}}
                </span>
                <i v-if="findex < 2" :key="'s'+findex"></i>
              </template>

              </span>
              </template>
            </p>
          </div>
        </div>
      </div>
      <Noview v-if="total == 0" />
      <div style="text-align: center" v-if="total > 0">
        <el-pagination background layout="prev, pager, next"
          :current-page="search.currentPage"
          :page-size="search.pageSize"
          @current-change="getEnterpriseLibList"
          :total="total"></el-pagination>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import { EnterpriseDataDict, EnterpriseLibList, GetQueryString, OccupationType, addCollectionEnterprise } from '../../assets/js/domains'
import mt from '../../assets/img/mt.png'
import reh from '@/assets/img/reh.png'
import Noview from '../../components/noview'
export default {
  name: 'Company',
  components: { Header, Footer, Noview },
  directives: {},
  data: function () {
    return {
      occupationlist: [],
      searchIndustry: '',
      objlist: {},
      total: 0,
      count: 0,
      mt: mt,
      reh: reh,
      ListList: [],
      search: {
        industry: '',
        nature: '',
        size: '',
        currentPage: 1,
        pageSize: 20,
        companyName: ''
      }
    }
  },
  created: function () {
    document.title = '企业库'
    if (GetQueryString('title')) {
      this.search.companyName = decodeURI(GetQueryString('title'))
    }
  },
  computed: {},
  mounted: function () {
    this.getEnterpriseDataDict()
    this.getEnterpriseLibList()
    this.OccupationType()
  },
  methods: {
    handleCommand (command) {
      this.tosearch('industry', command.name)
      this.searchIndustry = command.parentName
      console.log(this.searchIndustry)
    },
    getEnterpriseDataDict: function () {
      const _this = this
      EnterpriseDataDict().then(function (res) {
        if (res.code === 200) {
          _this.objlist = res.data
        }
      })
    },
    OccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        if (res.code === 200) {
          _this.occupationlist = res.data
        }
      })
    },
    getEnterpriseLibList: function (page) {
      const _this = this
      page && (this.search.currentPage = page)
      EnterpriseLibList(_this.search).then(function (res) {
        if (res.code === 200) {
          _this.ListList = res.data.content
          _this.total = res.data.numberOfElements
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    todetail: function (id) {
      window.location.href = '/companyDetail.html?enterpriseUid=' + id
    },
    tojob: function (id) {
      window.location.href = '/jobDetail.html?id=' + id
    },
    tosearch: function (name, id, itemName) {
      this.search[name] = id === '不限' ? '' : id
      if (name === 'industry') {
        this.searchIndustry = name
      }
      this.getEnterpriseLibList()
    },
    // 添加关注
    myCollection (info) {
      const _this = this
      if (!_this.curUserInfo.userUid) {
        _this.$message.warning('请先登录')
        return false
      }
      if (info.isCollection === 1) {
        _this.$message.warning('不可重复关注')
        return false
      }
      addCollectionEnterprise({
        enterpriseUid: info.enterpriseUid,
        isCollection: 1,
        userUid: _this.curUserInfo.userUid
      }).then(res => {
        if (res.code === 200) {
          info.isCollection = 1
          _this.$message.success('关注成功')
        } else {
          _this.$message.warning('关注失败')
        }
      }).catch(() => {
        _this.$message.warning('关注失败')
      })
    }
  }
}
</script>
<style lang="less">
  @import "../../assets/css/company";
  .el-dropdown{
    color: inherit !important;
    font-size: inherit !important;
    margin-right: 15px;
    margin-bottom: 15px;
    span{
      margin: 0 !important;
    }
  }
  .el-dropdown.on{
    background: #20a2b2;
    color: #fff;
    border-radius: 8px;
    span{
      color: #fff;
    }
  }
</style>
